<template>
	<view style="margin-bottom: 100rpx;">
		
		<uni-nav-bar title="商品搜索" backgroundColor="#f6f6f6" status-bar :fixed="true" :border="false">
			<block slot="left">
				<view style="display: flex;flex-direction: row;align-items: center;justify-content: flex-start;">
					<view @click="goBack" style="margin-left: 10px;">
						<uni-icons type="back" size="20" color="#666" />
					</view>
					<view @click="goHome" style="margin-left: 10px;">
						<uni-icons type="home" size="20" color="#666" />
					</view>
				</view>
			</block>
		</uni-nav-bar>
		
		<view v-if="goodsList.length > 0" style="margin: 20px 0 20px 0;">
			<uni-row>
<!-- 				<uni-col :span="12">
					<view style="padding: 10px;display: flex;flex-direction: column;">
						<view style="border: 0px solid black;">
							<view style="margin-bottom: 10px;height: 190px;">
								<image src="../../static/images/banner/banner02.jpg" style="height: 100%;border-radius: 10px;"></image>
							</view>
							<view style="margin-bottom: 10px;">
								<text :decode="true" style="color: #666666;font-size: 14px;margin-left: 8px;line-height: 20px;">
									【UPF100+】波司登2024新款原纱透气凉感宽松连帽外套长宽松全包裹防晒连帽防晒衣
								</text>
							</view>
							<view style="display: flex;flex-direction: row;">
								原价
								<text style="color: #BCA656;font-size: 16px;font-weight: 600;">
									¥666
								</text>
								划线价
								<view style="margin-left: 5px;text-decoration: line-through;font-size: 12px;color: #898c9a;display: flex;align-items: flex-end;">
									<text>
										¥299
									</text>
								</view>
							</view>
						</view>
					</view>
				</uni-col> -->
				<uni-col v-for="(item,index) in goodsList" :key="index" :span="12">
					<view @click="handShowGoodsInfo(item)" style="padding: 10px;display: flex;flex-direction: column;">
						<view style="border: 0px solid black;">
							<view style="margin-bottom: 10px;height: 190px;">
								<!-- <image src="../static/images/banner/banner03.jpg" style="height: 100%;border-radius: 10px;"></image> -->
								<image :src="item.mallGoodsBannerList[0].bannerPic" style="height: 100%;border-radius: 10px;"></image>
							</view>
							<view style="margin-bottom: 10px;">
								<text :decode="true" style="color: #666666;font-size: 14px;margin-left: 8px;line-height: 20px;">
									{{item.goodsName}}
								</text>
							</view>
							<view style="display: flex;flex-direction: row;">
								<!-- 折扣价 -->
								<text style="color: #BCA656;font-size: 16px;font-weight: 600;">
									¥{{item.mallGoodsSkuList[0].discountPrice}}
								</text>
								<!-- 划线价 -->
								<view style="margin-left: 5px;text-decoration: line-through;font-size: 12px;color: #898c9a;display: flex;align-items: flex-end;">
									<text>
										¥{{item.mallGoodsSkuList[0].orginPrice}}
									</text>
								</view>
							</view>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
		
		
		<view v-if="goodsList.length === 0" style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: 100rpx;">
			<view>
				<image src="../../static/images/goods1.png" style="width: 50px;height: 50px;"></image>
			</view>
			<view style="margin-top: 10px;font-size: 14px;color: #6F6F6F;">
				没有相关商品信息哦~
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:'goodsList',
		onLoad(option) {
			console.log(option.goodsName,'___商品搜索列表_onLoad_')
			this.initData(option.goodsName);
		},
		onShow() {
			//console.log('___商品搜索列表_onShow_')
		},
		created() {
			
		},
		data() {
			return {
				goodsList: [],
				txCloudEnvID:getApp().globalData.config.appInfo.txCloudEnvID,
				vxService:getApp().globalData.config.appInfo.vxService,
			}
		},
		methods: {
			initData(data){
			  let _this = this;
			  wx.cloud.callContainer({
				"config": {
				  "env": _this.txCloudEnvID
				},
				"path": "/system/goods/lists?goodsName="+data,
				"header": {
				  "X-WX-SERVICE": _this.vxService,
				  "content-type": "application/json"
				},
				"method": "GET",
				"data": ""
			  }).then((res) =>{
				  console.log(res);
				if(res.data.code == 200){
					_this.goodsList = [];
					if(res.data.data.length > 0){
						console.log('__________以下模糊查询商品列表______');
						console.log(res.data.data);
						_this.goodsList = res.data.data;
					}
				}
			  }).catch((e) =>{
				console.log(e.message);
				if(e.message.indexOf('102002') !== -1){
					this.$modal.showToast('请求超时')
				}else if(e.message.indexOf('-606003') !== -1){
					this.$modal.showToast('账号欠费，登录失败，请联系管理员')
				}else{
					this.$modal.showToast('系统异常，请联系管理员')
				}
			 })
				
			},
			goBack(){
				this.$tab.navigateBack();
			},
			goHome(){
				this.$tab.reLaunch("/pages/index");
			},
			handShowGoodsInfo(item){
				  console.log(item,'____',item.goodsName)
				  getApp().globalData.config.appInfo.goodsInfo='';
				  getApp().globalData.config.appInfo.goodsInfo = encodeURIComponent(JSON.stringify(item));
				  this.$tab.navigateTo("/pages/goodsdetail/index");
 
			}
			
		}
	}
</script>

<style lang="scss" scoped>

</style>
